<template>
  <el-container class="login-container">
    <el-main>
      <div class="center-in-center">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" v-show="show.showLogin">
          <el-form-item>
            <nuxt-link class="remarkFont" to="./">初意 单页面后台管理模板系统</nuxt-link>
          </el-form-item>
          <el-form-item prop="userName">
            <el-input v-model="loginForm.userName" placeholder="用户名" prefix-icon="el-icon-user"
                      @keyup.enter.native="submitForm('loginForm')"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password v-model="loginForm.password" placeholder="密码" prefix-icon="el-icon-key"
                      @keyup.enter.native="submitForm('loginForm')"></el-input>
          </el-form-item>

          <el-row :gutter="15">
            <el-col :span="14">
              <el-form-item prop="verCode">
                <el-input v-model="loginForm.verCode" placeholder="图形验证码" prefix-icon="float_right iconfont icon-safetycertificate"
                          @keyup.enter.native="submitForm('loginForm')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="verCode">
                <el-input v-model="loginForm.verCode" placeholder="验证码" prefix-icon="el-icon-mobile-phone" style="float: right"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-checkbox v-model="loginForm.remMe">记住密码</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-button type="text" style="float: right">忘记密码?</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" style="width: 100%" :loading="loading" @click.native.prevent="submitForm('loginForm')">登 入</el-button>
          </el-form-item>
          <el-row>
            <el-col :span="16">
              <el-form-item label="社交账号登入">
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="text" style="float: right" @click="show.showLogin = false">注册账号</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

        <el-form :model="logonForm" :rules="rules" ref="logonForm" v-show="!show.showLogin">
          <el-form-item>
            <p class="remarkFont">初意 单页面后台管理模板系统</p>
          </el-form-item>
          <el-form-item prop="phoneNumber">
            <el-input v-model="logonForm.phoneNumber" placeholder="手机" prefix-icon="el-icon-mobile-phone"></el-input>
          </el-form-item>
          <el-row :gutter="15">
            <el-col :span="14">
              <el-form-item prop="verCode">
                <el-input v-model="logonForm.verCode" placeholder="验证码" prefix-icon="float_right iconfont icon-safetycertificate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item>
                <el-button style="float: right">获取验证码</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="password">
            <el-input show-password v-model="logonForm.password" placeholder="密码" prefix-icon="el-icon-key"></el-input>
          </el-form-item>
          <el-form-item prop="againPassword">
            <el-input show-password v-model="logonForm.againPassword" placeholder="确认密码" prefix-icon="el-icon-key"></el-input>
          </el-form-item>
          <el-form-item prop="userName">
            <el-input v-model="logonForm.userName" placeholder="昵称" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="agreeRules">
                <el-checkbox v-model="logonForm.agreeRules">同意用户协议</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" style="width: 100%" :loading="loading" @click="submitForm('logonForm')">注 册</el-button>
          </el-form-item>
          <el-row>
            <el-col :span="16">
              <el-form-item label="社交账号注册">
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="text" style="float: right" @click="show.showLogin = true">用已有账号登入</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
    </el-main>
  </el-container>

</template>

<script>
  import {userLogin, userLogon} from "../../config/accounts/service/getData";
  import {validatePhone} from "../../config/util/validate";

  export default {
    name: "login",
    data() {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.logonForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      let checkRules = (rule, value, callback) => {
        if (value === false) {
          callback(new Error('请同意用户协议'));
        }
      };
      let checkPhone = validatePhone;

      return {
        loginForm: {
          userName: '',
          password: '',
          verCode: '',
          remMe: false
        },
        //注册
        logonForm: {
          phoneNumber: '',
          verCode: '',
          password: '',
          againPassword: '',
          userName: '',
          agreeRules: true,
        },
        loading: false,
        show: {
          showLogin: true
        },
        rules: {
          password: [
            { required: true, message: '必填项', trigger: 'blur' },
            { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
          ],
          againPassword: [
            { validator: validatePass, trigger: 'blur' }
          ],
          agreeRules: [
            { validator: checkRules, trigger: 'change' }
          ],
          userName: [
            { required: true, message: '必填项', trigger: 'blur' }
          ],
          verCode: [
            { required: true, message: '必填项', trigger: 'blur' }
          ],
          phoneNumber: [
            { required: true, message: '必填项', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' }
          ]
        },
      }
    },
    mounted() {
      // mounted钩子函数，dom已经渲染完毕，可以直接获取到dom对象进行聚焦
    },
    created() {
      // created，dom还未开始渲染，因此需要使用this.$nextTick 将其放置在下一个dom渲染操作时执行
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (formName === 'loginForm') {
              this.login()
            }
            if (formName === 'logonForm') {
              this.logon()
            }
          } else {
            console.log('error submit!!')
            return false
          }
        });
      },
      login() {
        this.loading = true
        if (this.loginForm.userName !== 'admin' || this.loginForm.password !== 'admin') {
          this.$message.error('用户名密码错误')
          this.loading = false
          return
        }
        /*
          this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state
          this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)
          this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)
        */
        this.$store.dispatch('modules/login', this.loginForm).then(() => {
          this.$router.push({ path: this.redirect || '/home/dashboard' }) //登录成功之后重定向到首页,20200104直接重定向到子路由就解决了默认子页面的问题
          this.loading = false
        }).catch(() => {
          this.loading = false
        })

        // let _this = this;
        // setTimeout(() => {
        //   _this.$message.success("成功");
        //   _this.loading = false
        // }, 500)
        // userLogin(this.loginForm,'用户登录',(res) => {
        //   if (res.success === true && res.code === 200) {
        //     _this.$message.success("成功");
        //   } else {
        //     _this.$message.error(res.message);
        //   }
        //   _this.loading = false
        // })
      },
      logon() {
        this.loading = true
        let _this = this;
        setTimeout(() => {
          _this.$message.success("注册成功");
          _this.loading = false
        }, 500)
        // userLogon(this.logonForm,'用户注册',(res) => {
        //   if (res.success === true && res.code === 200) {
        //     _this.$message.success("注册成功");
        //     _this.show.showLogin = true;
        //     _this.loginForm.userName = _this.logonForm.userName;
        //   } else {
        //     _this.$message.error(res.message);
        //   }
        //   _this.loading = false
        // })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .login-container {
    .center-in-center .el-form-item {
      margin-bottom: 18px;
    }
  }
</style>
